import './style.css'

/*document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>*/
/** ↑ 默认模板生成的是像上面这样的, ↓是我们自己写的用来演示如何使用热更新API*/

export function render(){
  document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`;
}

render();

//build下import.meta.hot是undefined的, 只在dev下才适用
if( import.meta.hot ){
  //接受到模块热更新时要做什么? ↓
  import.meta.hot.accept((newModule/*即本模块export出的东西, 本例中我们export出了render*/) => {
    newModule.render();

    //不能这么↓调用
    // render(); // ← 因为这样调用的是老的module里的render (闭包
  });
}

//todo 这里我们的代码其实是非常针对性的 因为我们知道这个文件有一个主函数叫render, 并且每次更新后我们应该去执行render, 这是一个非常针对性的功能。 如果我们的module越来越多,模块变得越来越多,export的内容越来越多, 那么你对于每个函数的export你可能都要去写
//  这是一个普通的没有特定类型的module这么一种更新模式
//  其实HMR最适合的就是像我们.vue文件的开发方式, 因为.vue文件是固定的,它export出来的内容也是固定的,一个文件代表一个组件,它的显示就是相当确定的, 那么我们对它写一个通用的HMR代码就比较简单了
